<template>
  <div>
    <div class="uploadImage-box">
      <template>
        <div class="showImage" :key="index" v-for="(item,index) in uploadImgArr">
          <div class="uploadImg"  :style="{backgroundImage:'url('+item.imgUrl+')',width:width+'px',height:height+'px'}"></div>
          <div class="uploadBg" v-if="!isDisabled">
            <span class="iconfont icon-shanchu" @click="deleteImg(item.id)"></span>
          </div>
        </div>
      </template>
      <template  v-if="uploadImgArr.length<9&&isDisabled==false">
        <Upload
            multiple
            :max-size="imgSize"
            :show-upload-list="false"
            :action="uploadUrl"
            :before-upload="handleBeforeUpload"
            :on-success="handleSuccess"
            :on-exceeded-size="handleExceededSize"
        >
          <div class="uploadBtn" :style="{width:width+'px',height:height+'px'}">
            <common-icon type="_shangchuan" :size="26"></common-icon>
            <p class="introText">{{introText}}</p>
          </div>
        </Upload>
      </template>
    </div>
  </div>
</template>

<script>
  import commonIcon from "_c/common-icon/common-icon.vue"
  import { getImgUrl } from "@/api/server-url";
  import {baseUrl} from '@/libs/api.request'
  export default {
    name: "uploadImages",
    components: { commonIcon },
    props: {
      imgIndex:{
        type:Number,
        default:0
      },
      // 这个改为必传的参数
      uploadType:{
        type:String,
        default:'tmp'
      },
      width:{
        type:Number,
        default:180
      },
      height:{
        type:Number,
        default:120
      },
      introText:{
        type:String,
        default:''
      },
      showuploadImg: {
        type: Array,
        default: () => {
          return [];
        }
      },
      // 是否禁用，禁用的话不能添加或者删除，只能查看
      isDisabled: {
        type:Boolean,
        default:false
      }
    },
    data() {
      return {
        imgSize: 2 * 1024,
        uploadImgArr:[],
        isStop: 0
      }
    },
    computed: {
      uploadUrl() {
        return `${baseUrl}/file/upload/${this.uploadType}`;
      }
    },
    methods: {
      guid() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
          var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
          return v.toString(16);
        })
      },
      deleteImg(id){

        this.uploadImgArr = this.uploadImgArr.filter(item=>{
          return item.id!=id;
        })
        this.$emit('uploadImgData',this.uploadImgArr,this.imgIndex)

      },
      handleBeforeUpload(res) {
        this.isStop++;
        console.log('before:',this.isStop);
        if (this.isStop > 9) {
          return false
        }
      },
      handleSuccess(res) {
        if(res.code==200 || res.code==201){

          var obj = {
            id:this.guid(),
            imgName:res.data.name,
            imgUrl:getImgUrl(res.data.name)
          };

          this.uploadImgArr.push(obj);
          this.$emit('uploadImgData',this.uploadImgArr,this.imgIndex);
        }
      },
      handleExceededSize(res) {
        // console.log('file:',res);
        this.$Message.error("图片大小不能超过2M！");
      }
    },
    watch: {
      showuploadImg: {
        handler(now, old) {
          var that = this;
          this.uploadImgArr= [];
          now.forEach(item => {
            var obj = {
              id: that.guid(),
              imgName: item,
              imgUrl: getImgUrl(item)
            };
            this.uploadImgArr.push(obj);
          });
        },
        immediate: true,
        deep: false
      },
      uploadImgArr: {
        handler(now, old) {
          this.isStop = now.length;
        },
        immediate: true,
        deep: false
      },
    }
  }
</script>

<style lang="less">
  @import '../../less/variable.less';

  .uploadImage-box{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    &>div{
      border-radius: 5px;
      overflow: hidden;
      margin-right: 15px;
      margin-bottom: 15px;
    }
    .showImage{
      display: flex;
      position: relative;
      &:hover{
        .uploadBg{
          display: flex;
        }
      }
      .uploadBg{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.6);
        display: none;
        justify-content: center;
        align-items: center;
        .iconfont{
          color: #ffffff;
          font-size: 36px;
          padding: 0 5px;
          cursor: pointer;
          &:hover{
            color: @mainColor;
          }
        }
      }
      .uploadImg{
        background-position: center;
        background-size: cover;
        border: 1px dashed #e5e5e5;

        img{
          width: 100%;
        }
      }
    }
    .uploadBtn{
      position: relative;
      cursor: pointer;
      display: flex;
      justify-content: center; /* 水平居中 */
      align-items: center;     /* 垂直居中 */
      border: 1px dashed #e5e5e5;
      &:hover{
        border-color:@mainColor;
        .iconfont{
          color: @mainColor;
        }
      }
      &>.iconfont {
        color: #474747;
      }
      .uploader-input{
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
      }
    }

  }
</style>
